import { memo, ForwardRefRenderFunction, ReactElement } from 'react'
import { Upload, Button, Flex } from 'antd'
import { uploadFile } from '@/api/file'

interface Props {
  success: (e: any) => void
  name: string
  params?: object
  accept: string
  width?: number
  children?: ReactElement
  showUploadList?: boolean
}
const Fileupload: ForwardRefRenderFunction<unknown, Props> = (props: Props) => {
  const { params, showUploadList = false }: any = props
  const beforeUpload = (e: any) => {
    const formData = new FormData()

    formData.append(props.name, e as File)

    if (props.params) Object.keys(params).forEach((key) => formData.append(key, params[key]))

    uploadFile(formData).then((res: any) => {
      props.success(res)
    })

    return false
  }
  return (
    <div>
      <Upload beforeUpload={beforeUpload} accept={props.accept} showUploadList={showUploadList}>
        <div className="p-24px w-350px h-110px " style={{ border: '1px dashed rgb(224, 224, 230)', background: 'rgb(250, 248, 248)' }}>
          <Flex justify="center">
            <Button className="text-blue-500">上传附件</Button>
          </Flex>
          <Flex justify="center">支持扩展名：{props.accept}</Flex>
        </div>
      </Upload>
    </div>
  )
}

export default memo(Fileupload)
